<script lang="ts">
import { Component, Vue, Watch } from 'vue-facing-decorator';
import NovelList from '@/pages/list/component/NovelList.vue';
import { queryNovelListByKeywordPrepare, queryTags } from '@/api/novel/list';
import type { TagListResponse } from '@/api/novel/list';
import { ElMessage } from 'element-plus';
import NovelTag from '@/pages/novel/component/NovelTag.vue';
import UserList from '../component/UserList.vue';
import { queryUserListByKeywordPrepare } from '@/api/auth/auth';

@Component({
  components: {
    NovelList,
    NovelTag,
    UserList,
  },
})
export default class KeywordListPage extends Vue {
  get searchType(): 'novel' | 'user' {
    if (this.$route.params.type === 'user') return 'user';
    return 'novel';
  }
  updateType(type: 'novel' | 'user') {
    this.$router.replace({
      name: this.$route.name,
      params: { type },
      query: this.$route.query,
    });
  }

  get keyword() {
    return this.$route.query.keyword + '';
  }
  get novelApi() {
    if (this.keyword) {
      return queryNovelListByKeywordPrepare(this.keyword);
    }
    return async () => ({ total: 0, novels: [] });
  }

  tags: TagListResponse['tags'] | null = null;
  @Watch('searchType')
  @Watch('keyword', { immediate: true })
  async tagKeywordChangeHandler() {
    this.tags = null;
    if (!this.keyword || this.searchType !== 'novel') return;
    const resp = await queryTags(this.keyword);
    if (resp.error != null) {
      ElMessage({ type: 'error', message: resp.error });
      return;
    }
    this.tags = resp.data.tags;
  }

  get userApi() {
    if (this.keyword) {
      return queryUserListByKeywordPrepare(this.keyword);
    }
    return async () => ({ total: 0, users: [] });
  }

}
</script>
<template>
<div class="keyword-novel-page">
  <el-tabs :model-value="searchType" @update:model-value="updateType">
    <el-tab-pane label="小说" name="novel">
      <div class="keyword-novel-container">
        <div class="keyword-novel-list">
          <h2>匹配关键字“{{ keyword }}”的小说</h2>
          <novel-list :api="novelApi" />
        </div>
        <div class="keyword-novel-tags">
          <h2>标签搜索</h2>
          <template v-if="tags">
            <div class="keyword-novel-tags-list">
              <novel-tag v-for="tag in tags" :key="tag.tag_name" :tag="tag.tag_name" />
            </div>
            <div class="keyword-novel-tags-empty" v-if="tags.length === 0">没有匹配的标签</div>
          </template>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="用户" name="user">
      <h2>用户“{{ keyword }}”</h2>
      <user-list :api="userApi" />
    </el-tab-pane>
  </el-tabs>
</div>
</template>
<style scoped>
.keyword-novel-page {
  max-width: 1000px;
  margin: 20px auto;
  padding: 0 20px;
  background-color: var(--el-bg-color-overlay);
  color: var(--el-text-color-primary);
  display: flow-root;
}

.keyword-novel-container {
  display: grid;
  grid-template-columns: 1fr 200px;
  grid-template-areas: "list tags";
}

.tiny-mode .keyword-novel-page {
  grid-template-columns: 1fr;
  grid-template-areas: "tags" "list";
}

.tiny-mode .keyword-novel-page {
  padding: 0 10px;
}

h2 {
  margin: 20px 0;
  font-size: 120%;
  font-weight: bold;
}

.keyword-novel-list {
  grid-area: list;
}

.keyword-novel-tags {
  grid-area: tags;
}

.keyword-novel-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.keyword-novel-tags-empty {
  color: var(--el-text-color-secondary);
}
</style>
